<!--
 * @Author: 橘子
 * @Date: 2022-09-30 21:54:25
 * @Project_description: 项目介绍
 * @Description: 代码是我抄的，不会也是真的
-->
<template>
  <div v-if='show' :class="{ 'd2-source--active': isActive }" class='d2-source' @click='handleClick'>
    <d2-icon name='code' />
    本页源码
  </div>
</template>

<script>
import setting from '@/setting'
import { get, last } from 'lodash'

export default {
  data() {
    return {
      isActive: false,
      path: '',
    }
  },
  computed: {
    show() {
      return setting.APP.view
    },
  },
  watch: {
    $route: {
      handler(to) {
        this.path = get(last(to.matched), 'components.default.__source')
      },
      immediate: true,
    },
  },
  mounted() {
    // 一秒后显示按钮
    setTimeout(() => {
      this.isActive = true
    }, 500)
  },
  methods: {
    // 点击按钮的时候跳转到源代码
    handleClick() {
      return this.$meg.error('多处修改，无法查看')
    },
  },
}
</script>

<style lang='scss' scoped>
.d2-source {
  $borderRadius: 4px;
  $paddingLR: 15px;
  $paddingTB: 7px;
  $fontSize: 12px;
  $rightOuter: $paddingLR / 2;
  opacity: 0;
  position: fixed;
  z-index: 9999;
  right: - $borderRadius - $rightOuter;
  bottom: 20px;
  font-size: $fontSize;
  line-height: $fontSize;
  font-weight: bold;
  border-radius: $borderRadius;
  padding: $paddingTB $paddingLR;
  padding-right: $borderRadius + $paddingLR;
  background-color: rgba(#000, .7);
  border: 1px solid #000;
  color: #FFF;
  transition: all .3s;
  @extend %unable-select;

  &.d2-source--active {
    opacity: 1;
  }

  &:hover {
    right: - $borderRadius;
    background-color: rgba(#000, .9);
  }
}
</style>
